<template>
	<view>
		<view class="container">
			<view class="header">
				<!-- 头像 -->
				<view class="icon" style="padding-left: 10px;position: relative;top:2px;">
					
					<cover-image :src="user.avatar" style="height: 95px;"></cover-image>
				</view>
				<!-- 简介 -->
				<view class="introduce" style="">
					<span style="margin-top: 20px;position: relative; top:20px ;font-size: 20px;font-weight: bold;">爱吃鱼的小猫</span>
				</view>
			</view>
			<view class="content">
				<!-- logo -->
				<view class="icando">
					我的功能
				</view>
				<!-- 图标列表 -->
				<view class="icandoList">
					
						<view class="icon" @click="goAddress()">
							<cover-image  src="../../static/icons/收货地址.png"></cover-image>
							<span style="margin-left: 5px;position: relative; top:10px;font-size: 13px; font-weight: bold;">收获地址</span>
						</view>
						<view class="icon" @click="goCollect()">
							<cover-image  src="../../static/icons/我的收藏.png"></cover-image>
							<span style="margin-left: 2px;position: relative; top:10px;font-size: 13px; font-weight: bold;">我的收藏</span>
						</view>
				<!-- 		<view class="icon"  @click="goCommet()">
							<cover-image  src="../../static/icons/五星.png"></cover-image>
							<span style="margin-left: 5px;position: relative; top:10px;font-size: 13px; font-weight: bold;">评价中心</span>
						</view> -->
						<view class="icon"   @click="goHistory()">
							<cover-image  src="../../static/icons/历史记录.png"></cover-image>
							<span style="margin-left: 5px;position: relative; top:10px;font-size: 13px; font-weight: bold;">浏览历史</span>
						</view>
					
				</view>
			</view>
			<view class="foot">
				<view class="systemList">
					<view class="personIntroduce border" style="display: flex;" @click="goPersonal()">
						<view class="icon">
							<cover-image  src="../../static/icons/个人信息.png"></cover-image>
						</view>
						<span>个人信息</span>
						<span>></span>
					</view>
					<view class="AboutUs border" style="display: flex;" @click="goaboutUs()">
						<view class="icon">
							<cover-image  src="../../static/icons/关于我们.png"></cover-image>
						</view>
						<span>关于我们</span><span>></span>
					</view>
					<view class="UserKnows border" style="display: flex;"  @click="gouserKnow()">
					<view class="icon">
						<cover-image  src="../../static/icons/用户协议.png"></cover-image>
					</view>
					<span>用户协议</span><span>></span>
					</view>
					<view class="LogOut border" style="display: flex;" @click="logout()">
						<view class="icon">
							<cover-image  src="../../static/icons/退出登录.png"></cover-image>
						</view>
						<span>退出登录</span><span>></span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:uni.getStorageSync('xm-user'),
			}
		},
		methods: {
			goHistory(){
				uni.navigateTo({
					url:'/pages/history/history'
				})
			},
			logout(){
				uni.removeStorage({
					key: 'xm-user',
					success: function (res) {
						uni.removeStorage({
							key: 'xm-orders',
							success: function (res) {
							uni.navigateTo({
								url:'/pages/login/login'
							})
							}
						});
					}
				});
				

			},
			gouserKnow(){
				uni.navigateTo({
					url:'/pages/userknow/userknow'
				})
			},
			goaboutUs(){
				uni.navigateTo({
					url:'/pages/aboutus/aboutus'
				})
			},
			goPersonal(){
				uni.navigateTo({
					url:'/pages/personal/personal'
				})
			},
			goAddress(){
				uni.navigateTo({
					url:'/pages/address/address'
				})
			},
			goCollect(){
				uni.navigateTo({
					url:'/pages/collect/collect'
				})
			}
		}
	}
</script>

<style>
.container {
	margin: 0 5px;
	background-color: white;
	height: 100vh;
	overflow: hidden;
}

.container .header {
	height: 100px;
	width: 380px;
	background-color: white;
	margin-top: 20px;
	display: flex;
	
}

.container .header .icon {
	width: 100px;
	height: 100px;
	margin-right: 20px;
}




.container .header{
	box-shadow: 0px 0px 20px gray;
	border-radius: 10px;
	margin-left: 5px;
	width: 370px;
}

.container .foot{
	height: 220px;
	width: 380px;
	background-color: white;
	margin-top: 20px;
	box-shadow: 0px 0px 20px gray;
	border-radius: 10px;
	margin-left: 5px;
	width: 370px;
}
.container .foot .systemList {
	overflow: hidden;
}
.container .foot .systemList view {
	margin-left: 10px;
	background-color: white;
	width: 350px;
	margin-top: 5px;
}
.container .foot .systemList view  view{
	width: 30px;
}
.container .foot .systemList view span {
	position: relative;
	left: 10px;
	top:10px;
}
.container .foot .systemList .border {
	border-bottom: 1px solid black;
	padding-bottom: 5px;
}
.container .foot .systemList .border span:last-child {
	margin-left: 210px;
}
.container .content{
	height: 130px;
	width: 380px;
	background-color: white;
	margin-top: 20px;
	box-shadow: 0px 0px 20px gray;
	border-radius: 10px;
	margin-left: 5px;
	width: 370px;
	overflow: hidden;
}
.container .content .icando {
	width: 300px;
	background-color: white;
	margin-left: 10px;
	font-size: 18px;
	margin-top: 5px;
}
.container .content .icandoList {
	display: flex;
	justify-content: space-evenly;
}
.container .content .icandoList .icon {
	width: 60px;
	height: 50px;
	margin-right: 25px;
	
}
.container .content .icandoList .icon:first-child {
	margin-left: 30px;
}
</style>
